<template>
  <div class="listShowStyle">
    <div class="wordStyle"><h3>{{ option.title }}</h3></div>
    <div class="dropDownLoadWrap">
      <el-scrollbar style="height:200px;">
        <div v-infinite-scroll="accountLoadMore" infinite-scroll-disabled="accountBusy" infinite-scroll-distance="10">
          <el-row v-for="(item,index) in data" :key="index" class="listBg" :gutter="10">
            <el-col :span="2" :offset="1">
              <span v-show="option.checkedFlag"><el-checkbox
                v-model="checkBoxFlag[index]"
                @change="checkedListBn(index)"
              /></span>
            </el-col>
            <el-col v-for="(item1,index1) in option.accountList.simpleList" :key="index1" :span="item1.span">
              <div class="wordEllipsis">
                <span>{{ item1.label }}：</span>
                <span :title="item[item1.prop]">{{ item1 | dataDicTrans(item) }}</span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="wordEllipsis"><span><button
                :class="[accountToggleClass[index] ? 'el-icon-caret-bottom' : 'el-icon-caret-top', 'color-red', 'arrow']"
                @click="clickItem(index)"
              /></span></div>
            </el-col>
            <el-col :span="24">
              <div v-if="listDetailShow[index]" class="listDetailBg">
                <el-row :gutter="10">
                  <el-col v-for="(item2,index2) in option.accountList.resList" :key="index2" :span="item2.span">
                    <div class="wordEllipsis">
                      <span>{{ item2.label }}：</span>
                      <span :title="item[item2.prop]">{{ item2 | dataDicTrans(detailData[index]) }} </span></div>
                  </el-col>
                </el-row>
                <el-row :gutter="10">
                  <el-col :span="24">
                    <avue-crud
                      :data="detailData[index]?detailData[index].resList:[]"
                      :option="option.lossOptionTable"
                      :page="option.lossPageTable"
                      @on-load="onLoad"
                      @size-change="sizeChange"
                      @current-change="currentChange"
                    />
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DropDownLoadCrud',
  props: ['data', 'detailData', 'option'],
  data() {
    return {
      accountBusy: true,
      accountToggleClass: [],
      listDetailShow: [],
      checkBoxFlag: []
    }
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        console.log('监听父元素数据改变')
        // 父组件param对象改变会触发此函数
        this.accountBusy = true
        for (let i = 0; i < this.accountToggleClass.length; i++) {
          this.$set(this.accountToggleClass, i, false)
        }
        for (let i = 0; i < this.listDetailShow.length; i++) {
          this.$set(this.listDetailShow, i, false)
        }
        for (let i = 0; i < this.checkBoxFlag.length; i++) {
          this.$set(this.checkBoxFlag, i, false)
        }
      },
      deep: true
    },
    detailData: {
      handler(newValue, oldValue) {
        //          this.detailData = newValue
      },
      deep: true
    }
  },
  methods: {
    // 列表滚动
    accountLoadMore() {
      console.log('下拉滚动日志。。。。。')
      this.accountBusy = true
      setTimeout(() => {
        this.accountBusy = false
      }, 2000)
    },
    onLoad(page) {
      //        请求参数
      //        page.currentPage
      //        page.pageSize
      this.$emit('onLoad', page)
    },
    clickItem(index) {
      if (!this.listDetailShow[index]) {
        this.$emit('detailListBtn', index)
      }
      this.$set(this.accountToggleClass, index, !this.accountToggleClass[index])
      this.$set(this.listDetailShow, index, !this.listDetailShow[index])
    },
    checkedListBn(index) {
      console.log('checkBoxFlag is: ' + this.checkBoxFlag[index])
      if (this.checkBoxFlag[index]) {
        for (let i = 0; i < this.checkBoxFlag.length; i++) {
          if (i !== index) {
            this.$set(this.checkBoxFlag, i, false)
          }
        }
      }
      this.$emit('checkedListBtn', [index, this.checkBoxFlag[index]])
    },
    sizeChange(i) {
      this.$emit('sizeChangeDropDownLoadCrud', i)
    },
    currentChange(j) {
      this.$emit('currentChangeDropDownLoadCrud', j)
    }
  }
}
</script>

<style scoped>
  /*超出省略*/
  .wordEllipsis {
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*width: 100%;*/
    /*height: 40px;*/
    line-height: 40px;
    /*white-space: nowrap;*/
    padding-left: 10px;
    word-break: break-all;
  }

  .el-col > span {
    width: 100%;
    height: 40px;
    line-height: 40px;
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .listDetailBg {
    background-color: #fff;
    border: 1px #eaeff7 solid;
    bottom: 100px;
  }

  .arrow {
    transform: rotateX(180deg);
  }

  .dropDownLoadWrap {
    border: 1px #eee solid;
    margin-top: 20px;
  }

  .wordStyle {
    line-height: 30px;
    padding: 0 5px;
  }

  .listShowStyle {
    margin-top: 10px;
  }
</style>
